<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" placeholder="请输入员工姓名" v-model="emp.name">
        <input type="text" placeholder="请输入员工薪水" v-model="emp.salary">
        <input type="text" placeholder="请输入员工岗位" v-model="emp.job">
        <button @click="add()">添加员工</button>
        <hr>
          <table>
              <table border="1px" cellpadding="0" cellspacing="0" width="400px" align="center">
                  <tr align="center">
                      <td>编号</td>
                      <td>员工姓名</td>
                      <td>员工薪水</td>
                      <td>员工岗位</td>
                      <td>操作</td>
                  </tr>
                  <tr v-for="(item,index) in employeeArr" align="center">
                      <td>{{index+1}}</td>
                      <td>{{item.name}}</td>
                      <td>{{item.salary}}</td>
                      <td>{{item.job}}</td>
                      <td><button @click="del(index)">删除</button></td>
                  </tr>
              </table>
          </table>
    </div>
    <script>
        let v = new Vue({
            el:'#app',
            data(){
                return{
                    employeeArr:[
                        {name:'杨怡',salary:18000,job:'运营'},
                        {name:'俊蒲',salary:22000,job:'游戏代练'},
                        {name:'展强',salary:20000,job:'java开发'},
                    ],
                    emp:{
                        name:'',
                        salary:'',
                        job:''
                    }
                }
            },
            methods:{
                add(){
                    console.log(this.emp)
                    this.employeeArr.push({name:this.emp.name,salary:this.emp.salary,job:this.emp.job})
                },
                del(index){
                    this.employeeArr.splice(index,1)
                }
            }
        })
    </script>
</body>
</html>
